<template>
  <div class="login_main">


    <div class="main">
      <h5>智慧食堂管理平台</h5>
      <div class="login_content_main">
        <div class="main_left">
          <img src="../assets/chahua.png" alt="">
        </div>
        <div>
          <h4>平台登录</h4>
          <div class="login_input">
            <div>
              <div>
                <img src="../assets/yonghuming.png" alt="" style="margin:5px 0.7vw;">
              </div>
              <div>
                <input type="text" v-model="loginForm.account" placeholder="请输入用户名">
              </div>
            </div>
            <div>
              <div>
                <img src="../assets/mima.png" alt="" style="margin:5px 0.7vw;">
              </div>
              <div>
                <input type="password" v-model="loginForm.password" placeholder="请输入密码">
              </div>
            </div>
            <div class="yzm">
              <img style="width: 40%;" class="pointer" :src="loginForm.src" @click="refreshCaptcha"/>
              <div>
                <img src="../assets/yanzhengma.png" alt="" style="margin:5px 0.7vw;">
              </div>
              <div>
                <input type="text" placeholder="请输入验证码" v-model="loginForm.captcha">
              </div>
            </div>

            <button class="reset" @click="reset">重 置</button>
            <br/>
            <button class="btn_login" @click="login">登 录 <i v-show="loading"
                                                            class="fa fa-spinner fa-spin fa-1x fa-fw"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {mapState} from "vuex";
  import Cookies from "js-cookie";
  import ThemePicker from "@/components/ThemePicker";
  import mainUrl from "../utils/global"

  export default {
    name: "Login",
    components: {
      ThemePicker
    },
    data() {
      return {
        loading: false,
        loginForm: {
          account: "",
          password: "",
          captcha: "",
          src: ""
        },
        fieldRules: {
          account: [{required: true, message: "请输入账号", trigger: "blur"}],
          password: [{required: true, message: "请输入密码", trigger: "blur"}]
        },
        checked: true
      };
    },
    created() {
      var that = this;
      document.onkeydown = function (e) {
        var key = window.event.keyCode;
        if (key == 13) {
          that.login();
        }
      }
    },
    methods: {
      login() {
        this.loading = true;
        let userInfo = {
          account: this.loginForm.account,
          password: this.loginForm.password,
          captcha: this.loginForm.captcha
        };
        this.$api.login
          .login(userInfo)
          .then(res => {
            if (res.msg != null) {
              this.$message({
                message: res.msg,
                type: "error"
              });
            } else {
              console.log(res)
              Cookies.set("token", res.data.token); // 放置token到Cookie
              sessionStorage.setItem("user", userInfo.account); // 保存用户到本地会话
              sessionStorage.setItem("name", res.data.name);//保存用户名
              this.$store.commit("menuRouteLoaded", false); // 要求重新加载导航菜单
              this.$router.push("/"); // 登录成功，跳转到主页
              this.getUserInfo(userInfo.account, res.data.token)
            }
            this.loading = false;
          })
          .catch(res => {
            this.$message({
              message: res.message,
              type: "error"
            });
          });
      },
      getUserInfo(name, token) {
        const that = this;
        this.$axios
          .get(mainUrl.baseUrl + "/user/findByName", {
            params: {
              name,
            },
            headers: {
              token
            }
          })
          .then(function (res) {
            if (res.data.code == 200) {
              console.log(res)
              let resultData = res.data.data;
              localStorage.setItem("userInfo", JSON.stringify(resultData));
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      refreshCaptcha: function () {
        console.log(this.global.baseUrl);
        this.loginForm.src =
          this.global.baseUrl + "/captcha.jpg?t=" + new Date().getTime();
      },
      reset() {
        this.loginForm.account = "";
        this.loginForm.password = "";
        this.loginForm.captcha = "";
      },
      // 切换主题
      onThemeChange: function (themeColor) {
        this.$store.commit("setThemeColor", themeColor);
      }
    },
    mounted() {
      this.refreshCaptcha();
    },
    computed: {
      ...mapState({
        themeColor: state => state.app.themeColor
      })
    }
  };
</script>

<style lang="scss" scoped>
  .yzm {
    position: relative;

    & > img {
      position: absolute;
      right: 0;
    }
  }

  .reset {
    width: 100%;
    height: 5.3vh;
    line-height: 5.3vh;
    background: #fff;
    border-radius: 27px;
    outline: none;
    border: 1px solid #14889A;
    margin-top: 6vh;
    color: #14889A;
    font-size: 20px;
    cursor: pointer;
  }

  .btn_login {
    font-size: 20px;
    width: 100%;
    line-height: 5.3vh;
    cursor: pointer;
    height: 5.3vh;
    background: linear-gradient(90deg, rgba(20, 136, 154, 1) 0%, rgba(32, 178, 201, 1) 100%);
    border-radius: 27px;
    border: none;
    outline: none;
    margin-top: 2vh;
    color: #fff;
  }

  .login_input {
    width: 23vw;

    img {
      width: 1.2vw;
    }

    & > div {
      display: flex;
      border-bottom: 1px solid #CBCBCB;
      padding: 2vh 0 1vh 0;

      input {
        font-size: 16px;
        padding: 5px 0;
        width: 20vw;
        border: none;
        background: none;
        outline: none;
      }
    }

  }

  .login_content_main {
    display: flex;

    .main_left {
      img {
        width: 27vw;
        margin-left: 13vw;
        margin-right: 3vw;
      }
    }

  }

  .main {
    width: 78.9vw;
    height: 76vh;
    background: url("../assets/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    & > h5 {
      color: #14889A;
      font-size: 24px;
      text-align: left;
      padding-left: 11vw;
      margin: 6vh 0 7vh;
    }

    h4 {
      font-size: 24px;
      color: #333;
      transform: translateY(-3px);
      text-align: left;
    }
  }

  .login_main {
    width: 100vw;
    height: 100vh;
    background: #179EB3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 0 auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #505458;
    }

    .remember {
      margin: 0px 0px 35px 0px;
    }
  }
</style>
